<template>
  <div class="component need-footer">
    <app-header title="媒体舆情监控列表" :needBack="true">
      <template slot="right-btn">
        <div class="filter-btn" @click="doFilter">
          <i class="iconfont icon-filter"></i>
          筛选
        </div>
      </template>
    </app-header>
    <filter-view
      v-show="filterOpenState"
      :needTime="true"
      :needIndustryType="true"
      :defaultIndustryType="type"
      :needSourceType="true"
      :needTotalEmotion="true">
    </filter-view>
    <ul class="article-list">
      <li v-for="(item, index) in list" :key="index" class="article">
        <router-link class="article-left" :to="{ name: 'MediaPublicSentimentControlDetail', query: {id: item.id}}">
          <p class="article-title">{{item.title}}</p>
          <p class="article-time">
            <span>发布时间：{{item.createTime | parseTime}}</span>
          </p>
          <div class="article-info">
            <div class="source">
              来源：{{item.source}}
            </div>
            <div class="similar">
              相似文章数：{{item.similar}}
            </div>
          </div>
          <i class="iconfont icon-back next-icon"></i>
        </router-link>
        <div class="article-right" @click="changeStatus(item)" :class="{'color-blue': item.status === 2, 'color-red': item.status === 3}">
          <span>{{item.status | parseStatus}}</span>
        </div>
      </li>
    </ul>
    <app-footer :active="2"></app-footer>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
import AppFooter from '@/components/common/AppFooter'
import FilterView from '@/components/common/FilterView'

const list = [
  { id: 1, title: '测试测试测试', createTime: 1531192229167, status: 1, similar: 5, source: '搜狐网', },
  { id: 2, title: '年底量产到底靠不靠谱？FF美国工厂探秘', createTime: 1531192229167, status: 2, similar: 3, source: '汽车之家', },
  { id: 3, title: 'bbbbbbbbb', createTime: 1531192229167, status: 3, similar: 2, source: '腾讯网', },
  { id: 4, title: 'hhhhhhhhhhhhh', createTime: 1531192229167, status: 2, similar: 1, source: '新浪网', },
  { id: 5, title: '测试测试测试', createTime: 1531192229167, status: 2, similar: 5, source: '搜狐网', },
  { id: 6, title: '年底量产到底靠不靠谱？FF美国工厂探秘', createTime: 1531192229167, status: 1, similar: 3, source: '汽车之家', },
  { id: 7, title: 'bbbbbbbbb', createTime: 1531192229167, status: 3, similar: 2, source: '腾讯网', },
  { id: 8, title: 'hhhhhhhhhhhhh', createTime: 1531192229167, status: 2, similar: 1, source: '新浪网', },
  { id: 9, title: '测试测试测试', createTime: 1531192229167, status: 2, similar: 5, source: '搜狐网', },
  { id: 10, title: '年底量产到底靠不靠谱？FF美国工厂探秘', createTime: 1531192229167, status: 1, similar: 3, source: '汽车之家', },
  { id: 11, title: 'bbbbbbbbb', createTime: 1531192229167, status: 3, similar: 2, source: '腾讯网', },
  { id: 12, title: 'hhhhhhhhhhhhh', createTime: 1531192229167, status: 2, similar: 1, source: '新浪网', },
]

const statusList = [
  { id: 1, name: '未标记', },
  { id: 2, name: '需要处理', },
  { id: 3, name: '不需要处理', },
]

export default {
  name: "",
  data() {
    let data = {
      list: list,
      type: decodeURI(this.$route.query.type),
      filterOpenState: false,
    }
    return data
  },
  methods: {
    // 处理状态
    changeStatus(target) {
      this.list.map(item => {
        if (item.id === target.id) {
          if (item.status === 3) {
            item.status = 1
          } else {
            item.status++
          }
        }
      })
    },
    // 打开筛选弹层
    doFilter() {
      this.filterOpenState = !this.filterOpenState
    }
  },
  components: {
    AppHeader,
    AppFooter,
    FilterView,
  },
  filters: {
    parseStatus(status) {
      let result = statusList.find(item => item.id === status)
      return result ? result.name : ''
    }
  },
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .article-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .article {
      width: 90%;
      padding: .2rem .1rem;
      border-bottom: 1px solid @border;
      margin-bottom: .2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .article-left {
        color: @grey;
        width: 75%;
        padding-right: 2%;
        border-right: 2px solid @border;
        position: relative;
        .article-title {
          font-size: .3rem;
          line-height: .4rem;
          margin-bottom: .1rem;
        }
        .article-time {
          margin-bottom: .1rem;
          font-size: .2rem;
        }
        .article-info {
          font-size: .2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .similar {
            margin-right: .5rem;
          }
        }
        .next-icon {
          font-size: .3rem;
          display: block;
          transform: rotate(180deg) translateY(50%);
          color: lighten(@grey, 30%);
          position: absolute;
          top: 50%;
          right: 0.1rem;
        }
      }
      .article-right {
        width: 25%;
        font-size: .25rem;
        text-align: center;
        color: @grey;
        &>span {
          padding: .08rem;
          border-radius: 5px;
          border: 1px solid @grey;
        }
        &.color-red>span {
          border: 1px solid @red;
        }
        &.color-blue>span {
          border: 1px solid @blue;
        }
      }
    }
  }
</style>
